@use "../../variables" as *;

.spg-button-group {
  position: relative;
  display: flex;
  padding: var(--ctr-button-group-padding, var(--sjs-spacing-x05));
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  overflow-x: auto;

  border-radius: var(--ctr-button-group-corner-radius, var(--sjs-corner-radius-x075));
  box-shadow: inset 0 0 0 var(--ctr-button-group-border-width, var(--sjs-stroke-x1))
    var(--ctr-button-group-border-color, var(--sjs-border-10, #dcdcdcff));
  background-color: var(--ctr-button-group-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--ctr-button-group-corner-radius, var(--sjs-corner-radius-x075));
    box-shadow: inset 0 0 0 var(--ctr-button-group-border-width-focused, var(--sjs-stroke-x2)) transparent;
    pointer-events: none;
    transition: box-shadow $creator-transition-duration;
  }
}

.spg-button-group:focus-within::after {
  box-shadow: inset 0 0 0 var(--ctr-button-group-border-width-focused, var(--sjs-stroke-x2))
    var(--ctr-button-group-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
}

.spg-button-group__item {
  @include ctrDefaultFont;
  color: var(--ctr-button-group-item-text-color, var(--sjs-layer-3-foreground-100, #000000e6));

  display: flex;
  padding: var(--ctr-button-group-item-padding-vertical, var(--sjs-spacing-x1))
    var(--ctr-button-group-item-padding-horizontal, var(--sjs-spacing-x2));
  justify-content: center;
  align-items: center;
  align-self: stretch;
  flex-basis: 0;
  flex-grow: 1;

  border-radius: var(--ctr-button-group-item-corner-radius, var(--sjs-corner-radius-x075));
  box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width, 0px) var(--ctr-button-group-item-border-color, var(--sjs-border-10, #dcdcdcff));
  background-color: var(--ctr-button-group-item-background-color, transparent);

  transition:
    background $creator-transition-duration,
    background-color $creator-transition-duration,
    color $creator-transition-duration;

  &:not(:last-of-type) {
    margin-right: var(--ctr-button-group-gap, var(--sjs-spacing-x05));
  }
}

.spg-button-group__item--hover:hover {
  background-color: var(--ctr-button-group-item-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
}

.spg-button-group__item-icon {
  use {
    fill: var(--ctr-button-group-item-icon-color, var(--sjs-layer-3-foreground-75, #000000bf));
  }
}

.spg-button-group__item--selected {
  @include ctrDefaultBoldFont;
  color: var(--ctr-button-group-item-text-color-selected, var(--sjs-primary-background-500, #19b394ff));
  box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width-selected, var(--sjs-stroke-x1))
    var(--ctr-button-group-item-border-color, var(--sjs-border-10, #dcdcdcff));
  background: var(--ctr-button-group-item-background-color-selected, var(--sjs-layer-1-background-500, #ffffffff));
  .spg-button-group__item-icon use {
    fill: var(--ctr-button-group-item-icon-color-selected, var(--sjs-primary-background-500, #19b394ff));
  }
}

.spg-button-group__item-decorator {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.spg-button-group__item-caption {
  display: block;
}
.spg-question--disabled .spg-button-group {
  background: var(--ctr-button-group-background-color-disabled, var(--sjs-layer-1-background-500, #ffffffff));
}

.spg-button-group__item--disabled {
  color: var(--ctr-button-group-item-text-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
  background: var(--ctr-button-group-item-background-color-disabled, var(--sjs-layer-1-background-500, #ffffffff));
  .spg-button-group__item-icon use {
    fill: var(--ctr-button-group-item-text-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
  }
  .spg-button-group__item-caption {
    opacity: var(--ctr-button-group-item-text-opacity-disabled, 0.25);
    color: var(--ctr-button-group-item-text-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
  }
  &:hover {
    background-color: var(
      --ctr-button-group-item-background-color-disabled,
      var(--sjs-layer-1-background-500, #ffffffff)
    );
  }
}

.spg-button-group__item--selected.spg-button-group__item--disabled {
  @include ctrDefaultFont;
  box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width-selected-disabled, 0px)
    var(--ctr-button-group-item-border-color, var(--sjs-border-10, #dcdcdcff));
  background: var(
    --ctr-button-group-item-background-color-selected-disabled,
    var(--sjs-layer-1-background-400, #f5f5f5ff)
  );
}
